<template>
    <el-card class="box-card" shadow="never">
        <div slot="header">
            <span>🍻 推广</span>
        </div>
        <div>
            <!--v-for实现循环，绑定key，vue要求我们给每个组件加上key，方便定位，block每个元素会有一定间距-->
            <p v-for="(item,index) in list" :key="index" class="block">
                <!--_blank用新页面打开-->
                <a :href="item.link" target="_blank">{{ item.title }}</a>
            </p>
        </div>
    </el-card>
</template>

<script>


    import {getlist} from "@/api/promotion";

    export default {
        name: 'Promotion',
        data() {
            return {
                list:[]
            }
        },
        //在页面开始加载的时候
        created(){
            //请求后台方法
            this.fetchList()
        },
        methods: {
            //定义异步方法
            async fetchList(){
                //接收到服务端返回来的value
                getlist().then((value) => {
                    const { data } = value
                    this.list = data;
                })
            }
        }
    }
</script>
